<template>
	<view class="home">
		<view class="u-p-24">
			<up-search placeholder="搜索图书" v-model="keyword" shape="square" :showAction="false" bgColor="#fff"
				borderColor=""></up-search>
		</view>
		<view class="u-p-l-24 u-p-r-24">
			<up-swiper :list="list1" @click="clickSwiper" :circular="true"></up-swiper>
		</view>
		<view class="u-p-l-24 u-p-r-24 flex u-flex-between align-center u-m-t-48"
		>
			<view class="imgBox flex justify-center align-center flex-col" v-for="(item, index) in typeArr"
			@click="tipPage(item.path)"
				:key="index">
				<image :src="item.img" class="imgIn"></image>
				<text class="imgName">{{item.name}}</text>
			</view>
		</view>
		<view class="u-p-l-24 u-p-r-24 hotRecommend">
			热门推荐
		</view>
		<view>
			<view class="flex justify-start align-center bookBox"
			 @click="tipDetail(item)"
			 v-for="(item, index) in bookList" :key="index">
				<image :src="item.img" class="bookImg u-m-l-32 u-m-r-32" mode="aspectFill"></image>
				<view style="height: 240rpx;">
					<view class="bookName">{{item.name}}</view>
					<view class="author u-m-t-16">{{item.author}}</view>
					<view class="bookNum u-m-t-16">
						馆藏数量：{{item.num}} 本
					</view>
					<view class="btn u-m-t-24">借阅</view>
				</view>
			</view>
			<view></view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	const keyword = ref('')

	// 轮播图 start
	const list1 = reactive([
		'/static/img/bookSwiper.png',
		'/static/img/bookSwiper2.png'
	])
	// 点击 轮播图
	const clickSwiper = () => {
		
	}
	
	// 轮播图 end
	const bookList = ref([
		{
			img: '/static/img/renleijianshi.jpg',
			name: '人类简史：从动物到上帝',
			author:'尤瓦尔·赫拉利',
			num: 3
		},
		{
			img: '/static/img/shijianjianshi.jpg',
			name: '时间简史',
			author:'史蒂芬·霍金',
			num: 5
		},
	])
	const typeArr = reactive([{
			name: '全部图书',
			img: '/static/img/one.png',
			path: '/pages/book/index'
		},
		{
			name: '借阅记录',
			img: '/static/img/two.png',
			path: '/pages/record/index'
		},
		{
			name: '预约管理',
			img: '/static/img/three.png',
			path: ''
		},
		{
			name: '个人中心',
			img: '/static/img/four.png',
			path: '/pages/mine/index'
		}
	])
	const tipPage  = (path) => {
		console.log(path)
		if (path) {
			uni.switchTab({
				url: path
			})
		}
	}
	const tipDetail = (info) => {
		uni.navigateTo({
			url: '/pages/book/detail?info='+JSON.stringify(info)
		})
	}
</script>

<style lang="scss">
	.home {
		width: 100vw;
		min-height: 100vh;
		background-color: #F7F8F9;

		.imgBox {
			flex-direction: column;

			.imgIn {
				width: 128rpx;
				height: 128rpx;
			}

			.imgName {
				color: #4B5563;
				font-size: 28rpx;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
		}

		.hotRecommend {
			color: #000000;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 50rpx;
		}
		.bookBox{
			width: 686rpx;
			margin-left: calc(50vw - 343rpx);
			background-color: #fff;
			height: 314rpx;
			border-radius: 24rpx;
			margin-top: 32rpx;
		}
		.bookImg{
			width: 160rpx;
			height: 240rpx;
			border-radius: 8rpx;
		}
		.bookName{
			color: #000000;
			font-size: 28rpx;
			font-weight: bold;
		}
		.author{
			color: #6B7280;
			font-size: 28rpx;
		}
		.bookNum{
			color: #9CA3AF;
			font-size: 28rpx;
		}
		.btn{
			width: 120rpx;
			height: 72rpx;
			background: #4A90E2;
			border-radius: 8rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
		}
	}
</style>